<template>
	<view class="circle">
		<view class="tip font12 color999">*圈子一旦选择并公开给用户后便不能修改，请谨慎选择</view>
		<view class="title bold font16">大学圈子</view>
		<view class="flex alignCenter flexWrap">
			<view :class="item.choose?'font14 circleOne circleOneActive':'font14 circleOne'" v-for="(item,index) in schoolCol" :key="index" @click="chooseCircle(item)">{{item.circleName}}
				<uni-icons class="close" type="clear" size="18" @click="cancelCol('school',item,index)"></uni-icons>
			</view>
			<view class="noWidthBtn colBtn" @click="addCol('school')">+收藏</view>
		</view>
		<view class="title bold font16">专业圈子</view>
		<view class="flex alignCenter flexWrap">
			<view :class="item.choose?'font14 circleOne circleOneActive':'font14 circleOne'" v-for="(item,index) in majorCol" :key="index" @click="chooseCircle(item)">{{item.circleName}}
				<uni-icons class="close" type="clear" size="18" @click="cancelCol('major',item,index)"></uni-icons>
			</view>
			<view class="noWidthBtn colBtn" @click="addCol('major')">+收藏</view>
		</view>
		<view class="fixedBottomBtn" @click="sureChoose">确定</view>
		<!-- 选择学校 -->
		<uni-chooseschool v-if="showProvince" :showProvince="showProvince" @schoolSuccess="schoolSuccess" @cancelProvince="showProvince=false"></uni-chooseschool>
		<!-- 选择专业 -->
		<uni-choosecolmajor v-if="showMajor" :showMajor="showMajor" @majorSuccess="majorSuccess" @cancelMajor="showMajor=false"></uni-choosecolmajor>
	</view>
</template>

<script>
	import { getMyCollection,addCollection,cancelCollection } from "@/api/collection.js"
	import { editGroupInfo } from "@/api/send.js"
	export default {
		data() {
			return {
				schoolCol:[],
				majorCol:[],
				showProvince:false,
				showMajor:false,
				// chooseCircleArr:[],
				alreadyChoose:[],
				canCancel:true,
				groupId:''
			}
		},
		onLoad(option) {
			console.log('option',JSON.parse(option.circle))
			this.alreadyChoose=JSON.parse(option.circle)?JSON.parse(option.circle):[]
			this.canCancel=(option.cancel=='false'?false:true)
			this.groupId=(option.id?option.id:'')
			this.getColList()
		},
		methods: {
			// 获取收藏列表
			getColList(){
				//circleType 1校友圈  2专业圈
				getMyCollection().then((res)=>{
					if(res.code==100000){
						res.data.forEach((item)=>{
							//提问选择的圈子再点开时需要回显
							item.choose=false
							if(this.alreadyChoose.length>0){
								this.alreadyChoose.forEach((val)=>{
									if(val.objectId==item.objectId || val.subjectCode==item.objectId){
										item.choose=true
										return
									}
								})
							}else{
								item.choose=false
							}
							if(item.circleType==1){
								this.schoolCol.push(item)
							}else{
								this.majorCol.push(item)
							}
						})
						console.log('收藏',this.schoolCol,this.majorCol)
					}
				})
			},
			// 添加收藏
			addCol(type){
				if(type=='school'){
					this.showProvince=true
				}else{
					this.showMajor=true
				}
			},
			// 选择学校后的确定回调事件
			schoolSuccess(item){
				item.school.circleName=item.school.title
				this.collectionApi(1,item.school)
			},
			// 取消收藏
			cancelCol(type,item,idx){
				uni.showModal({
					title: '提示',
					content: `确定取消对该${type=='school'?'校':'专业'}的收藏吗？`,
					success:(res)=> {
						if (res.confirm) {
							let param={
								id:item.id
							}
							cancelCollection(param).then((res)=>{
								if(res.code==100000){
									if(type=='school'){
										this.schoolCol.splice(idx,1)
									}else{
										this.majorCol.splice(idx,1)
									}
								}
							})
						} else if (res.cancel) {}
					}
				});
			},
			// 选择专业的确定事件
			majorSuccess(obj){
				obj.subjectOne.circleName=obj.subjectOne.title
				this.collectionApi(2,obj.subjectOne)
			},
			// 公用的收藏Api
			collectionApi(type,obj){
				let param={
					circleType:type,
					objectId:obj.schoolCode || obj.subjectCode,
					circleName:obj.title,
					logo:obj.imageUrl || ''
				}
				addCollection(param).then((res)=>{
					if(res.code==100000){
						// 不能取消的情况下(小组若选择了圈子修改时不能减只能加)就算新增的也要判断是否已经选择过了
						if(!this.canCancel){
							let hasChoose=this.alreadyChoose.filter((item)=>item.objectId==obj.subjectCode || item.objectId==obj.objectId || item.objectId==obj.schoolCode)
							if(hasChoose.length>0){
								obj.choose=true
							}else{
								obj.choose=false
							}
						}else{
							obj.choose=false
						}
						console.log('obj===',obj)
						this.schoolCol=[]
						this.majorCol=[]
						this.getColList()
						// 学校收藏
						if(type==1){
							// 是为了手动增加一个元素并改变该元素的状态不能实现数据双向绑定改变重新渲染
							// let newSchoolCol=JSON.parse(JSON.stringify(this.schoolCol))
							// newSchoolCol.unshift(obj)
							// this.schoolCol=JSON.parse(JSON.stringify(newSchoolCol))
							this.showProvince=false
						}else{
							// 专业收藏
							// let newMajorCol=JSON.parse(JSON.stringify(this.majorCol))
							// newMajorCol.unshift(obj)
							// this.majorCol=JSON.parse(JSON.stringify(newMajorCol))
							this.showMajor=false
						}
						console.log('添加收藏',res,this.schoolCol,this.majorCol)
					}
				})
			},
			// 选择圈子
			chooseCircle(item){
				// 如果是小组的圈子只能增加，不能减少
				let changeHas=this.alreadyChoose.filter((val)=>val.objectId==item.objectId || item.objectId==val.subjectCode || item.objectId==val.schoolCode)
				if(!this.canCancel && item.choose && changeHas.length>0){
					uni.showToast({
						title:'原有的不能取消哦',
						icon:'none'
					})
					return
				}
				item.choose=!item.choose
			},
			// 确定选择的圈子
			sureChoose(){
				let schoolCircle=this.schoolCol.filter((item)=>item.choose)
				let majorCol=this.majorCol.filter((item)=>item.choose)
				let chooseCircleArr=schoolCircle.concat(majorCol)
				console.log('选择的圈子',chooseCircleArr)
				if(chooseCircleArr.length==0){
					uni.showToast({
						title:'请先选择圈子',
						icon:'none'
					})
					return
				}
				if(chooseCircleArr.length>3){
					uni.showToast({
						title:'圈子最多只能选择3个',
						icon:'none'
					})
					return
				}
				
				if(!this.canCancel){
					// 小组管理选择圈子后要调用接口
					let circles=[]
					chooseCircleArr.forEach((val)=>{
						let newObj={
							objectId:val.objectId || val.subjectCode || val.schoolCode,
							objectName:val.circleName
						}
						circles.push(newObj)
					})
					let param={
						id:this.groupId,
						circles:circles
					}
					editGroupInfo(param).then((res)=>{
						if(res.code==100000){
							uni.showToast({
								title:'修改成功',
								icon:'none'
							})
						}
					})
				}else{
					uni.setStorageSync('chooseCircle',chooseCircleArr)
				}
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style scoped lang="scss">
@import "@/static/public.scss";
.circle{
	padding: 30rpx 30rpx 120rpx;
	box-sizing: border-box;
	.title{
		padding:30rpx 0;
	}
	.circleOne{
		border:1px solid $colorMain;
		border-radius: 40rpx;
		padding: 8rpx 30rpx;
		position: relative;
		margin:0 20rpx 30rpx 0;
	}
	.circleOneActive{
		background: $colorMain;
	}
	.close{
		position: absolute;
		right:-15rpx;
		top:-15rpx;
	}
	.colBtn{
		margin:0 0 30rpx 0;
	}
}
</style>
